Typography
Display
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
| Class | Example |
|---|---|
| .display-1 | Display |
| .display-2 | Display |
| .display-3 | Display |
| .display-4 | Display |
| .display-5 | Display |
| .display-6 | Display |
Headings
| Class | Tag | Example |
|---|---|---|
| .h1 | h1 | Heading |
| .h2 | h2 | Heading |
| .h3 | h3 | Heading |
| .h4 | h4 | Heading |
| .h5 | h5 | Heading |
| .h6 | h6 | Heading |
Font Sizes
The base font size is 16px. All other font sizes are based on this value.
| Class | Equivalent pixels | Example |
|---|---|---|
| .fs-3xs | 10 | Example |
| .fs-xxs | 12 | Example |
| .fs-xs | 13 | Example |
| .fs-sm | 14 | Example |
| .fs-md | 16 | Example |
| .fs-lg | 18 | Example |
| .fs-xl | 20 | Example |
| .fs-xxl | 22 | Example |
| .fs-3xl | 24 | Example |
| .fs-4xl | 32 | Example |
Font Weights
Kyber's predefined font weight classes allow developers and designers to easily apply different font weights to text elements, providing fine-grained control over typography and emphasizing or de-emphasizing text as needed.
| Class | Equivalent Weight | Example |
|---|---|---|
| .fw-light | 200, 300 | Example |
| .fw-normal | 400 | Example |
| .fw-medium | 500 | Example |
| .fw-semibold | 600 | Example |
| .fw-bold | 700 | Example |
Section Headers
| Class | Example |
|---|---|
| .section-header-xs | Section Heading |
| .section-header-sm | Section Heading |
| .section-header-md | Section Heading |
| .section-header-lg | Section Heading |
| .section-header-xl | Section Heading |
Links
Standalone hyperlinks that do not use the <Link> component can be styled with the .klink class. Which will apply the expected text decoration and hover styling.
Result
Loading...
Live Editor